<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>The HTML Presentation Framework</title>
        <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
        <meta name="author" content="Hakim El Hattab">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <style>
            html,body{
                width: 100%;
                height: 100%;
                background:#0A0F23;
            }
            *{
                margin: 0;
                padding: 0;
            }
        </style>
    </head>

    <body>
    <div id="main" style="width: 100%;height:100%;"></div>
    <script src="../components/echarts-4.0.4.min.js"></script>
        <script>
            var pieChart = echarts.init(document.getElementById('main'));
            var	data=[
                {value:5728, name:'计算机、通信和其他电子设备制造也'},
                {value:3308, name:'信息传输、软件和信息技术职务'},
                {value: 1363, name:'通用设备制造业'},
                {value: 1963, name:'专用设备制造业'},
                {value:1110, name:'航空航天和其他运输设备制造业'},
                {value:357, name:'电器机械和器材制造业'},
                {value:251, name:'仪器仪表制造业'},
                {value:854, name:'金属制品业'},
                {value:968, name:'金属冶炼和压延加工业'},
                {value:658, name:'原材料和化学制品制造业'},
                {value:1268, name:'科学研究和技术服务业'},
                {value:300, name:'汽车制造业'},
                {value:2980, name:'其他'}
            ]

            var pieOption = {
                title: {
                    text: '我国民营企业参与军工行业分类',
                    left: 'center',
                    top: "7%",
                    textStyle: {
                        color: '#fff',
                        fontSize: 22
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                color: ['#336c9c','#8ce8e7','#62cff1','#17d4ee','#4fac88','#59c293','#67c47b'],
                legend: { //图例组件，颜色和名字
                    left: '10%',
                    top: '20%',
                    orient: 'vertical',
                    icon: 'rect',
                    data: ['计算机、通信和其他电子设备制造也' ,'信息传输、软件和信息技术职务' ,'通用设备制造业' ,'专用设备制造业' ,'航空航天和其他运输设备制造业' ,'电器机械和器材制造业' ,'仪器仪表制造业' ,'金属制品业' ,'金属冶炼和压延加工业' ,'原材料和化学制品制造业' ,'科学研究和技术服务业' ,'汽车制造业' ,'其他'],
                    textStyle: {
                        color: '#FFF',
                        fontSize: 16
                    }
                },
                series: [{
                    name: '违规次数',
                    type: 'pie',
                    clockwise: false, //饼图的扇区是否是顺时针排布
                    minAngle: 5, //最小的扇区角度（0 ~ 360）
                    center: ['70%', '50%'], //饼图的中心（圆心）坐标
                    radius: ['0', '50%'],//饼图的半径
                    avoidLabelOverlap: true, ////是否启用防止标签重叠
                    itemStyle: { //图形样式
                        normal: {
                            borderColor: '#fff',
                            borderWidth: 1
                        }
                    },
                    label: { //标签的位置
                        normal: {
                            show: true,
                            position: 'inside', //标签的位置
                            formatter: "{c}",
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontWeight: 'bold'
                            }
                        }
                    },
                    data: data
                }, {
                    name: '',
                    type: 'pie',
                    clockwise: false,
                    silent: true,
                    minAngle: 5, //最小的扇区角度（0 ~ 360）
                    center: ['50%', '50%'], //饼图的中心（圆心）坐标
                    radius: ['0', '25%'],//饼图的半径
                    itemStyle: { //图形样式
                        normal: {
                            borderColor: '#fff',
                            borderWidth: 0,
                            opacity: 0
                        }
                    },
                    label: { //标签的位置
                        normal: {
                            show: true,
                        }
                    },
                    data: data
                }]
            };

            var currentIndex = -1;
            var timer1 = setInterval(function () {
                var dataLen = pieOption.series[0].data.length;
                // 取消之前高亮的图形
                pieChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: currentIndex
                });
                currentIndex = (currentIndex + 1) % dataLen;
                // 高亮当前图形
                pieChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: currentIndex
                });
            }, 1000);
            pieChart.setOption(pieOption);
        </script>
    </body>
</html>
